<template>
  <ItemWrap title="当前复核作业">
    <dv-scroll-board
      ref="target"
      :config="config"
      class="h-full w-full overflow-hidden scroll-board-container"
    />
  </ItemWrap>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import ItemWrap from "./item-wrap/item-wrap.vue";

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
});
const config = ref({
  header: [
    "复核单号",
    "客户/店铺",
    "数量",
    "已复核",
    "未复核",
    "库区",
    "复核人",
  ],
  // data: props.data.map((item) => {
  //   return [item.areaId, item.areaName, item.storeName];
  // }),
  data: [
    ["PH1011234567", "云南蒙自南湖荟店", 500, "300", "200", "ZG", "吴方志"],
    [
      "PH1021234567",
      "西藏拉萨王府井购物中心店",
      600,
      "400",
      "200",
      "ZK",
      "吴方志",
    ],
    [
      "PH1031234567",
      "海南三亚吉阳区蓝海购物广场店	",
      300,
      "100",
      "200",
      "UI",
      "吴方志",
    ],
    [
      "PH1031234567",
      "湖北襄阳民发广场航空路店MML",
      400,
      "250",
      "150",
      "YU",
      "吴方志",
    ],
    [
      "PH1031234567",
      "内蒙古乌兰察布化得泰德隆广场店	",
      500,
      "350",
      "150",
      "YT",
      "吴方志",
    ],
    [
      "PH1031234567",
      "河北秦皇岛茂业天地购物中心店",
      600,
      "150",
      "450",
      "YS",
      "吴方志",
    ],
    ["PH1031234567", "河北枣强信誉楼店", 700, "650", "50", "YP", "吴方志"],
    [
      "PH1031234567",
      "湖南湘潭九华步步高新天地店",
      7000,
      "3450",
      "3550",
      "YZ",
      "吴方志",
    ],
    // 可以添加更多的行数据
  ],
  rowNum: 5, //表格行数
  headerHeight: 30,
  headerBGC: "#00baff", //表头
  oddRowBGC: "#0f1325", //奇数行
  evenRowBGC: "#171c33", //偶数行
  align: ["left", "left", "left", "left", "left", "left", "left"],
  columnWidth: ["120", "220", "70", "70", "70", "60", "65"],
});

let resizeObserver = null;

onMounted(() => {
  // 监听全屏切换事件
  document.addEventListener("fullscreenchange", handleFullScreenChange);
  document.addEventListener("webkitfullscreenchange", handleFullScreenChange);
  document.addEventListener("mozfullscreenchange", handleFullScreenChange);
  document.addEventListener("MSFullscreenChange", handleFullScreenChange);

  // 创建 ResizeObserver 实例
  resizeObserver = new ResizeObserver(handleResize);
  // 监听容器大小变化
  resizeObserver.observe(document.querySelector(".scroll-board-container"));
});

onUnmounted(() => {
  // 移除全屏切换事件监听
  document.removeEventListener("fullscreenchange", handleFullScreenChange);
  document.removeEventListener(
    "webkitfullscreenchange",
    handleFullScreenChange
  );
  document.removeEventListener("mozfullscreenchange", handleFullScreenChange);
  document.removeEventListener("MSFullscreenChange", handleFullScreenChange);
  // 停止监听容器大小变化
  resizeObserver.disconnect();
});

const handleResize = () => {
  // 在这里处理容器大小变化的逻辑，例如重新计算和设置组件的大小和位置
};

const handleFullScreenChange = () => {
  if (!document.fullscreenElement) {
    // 退出全屏模式时触发
    handleResize();
  }
};
</script>
<style lang="scss" scoped>
.scroll-board-container {
  width: 100%;
  height: 90%;
  overflow: hidden;
}

::v-deep .dv-scroll-board .rows .row-item {
  font-size: 13px !important;
}
</style>
